<template>
	<view class="all">
		<view class="img">
			<u-image width="690rpx" height="1090rpx" :src="src"></u-image>
		</view>
		<view class="btn" @click="saveImg()">
			<view class="flex">
				<u-icon color="#FFFFFF" name="download"></u-icon>
				<view class="ml7">
					保存到相册
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:'',
			}
		},
		onLoad() {
			this.getImg()
		},
		methods: {
			async getImg(){
				 const res =await this.$allrequest.mch_store.mchCode({})
				 if(res.code==0){
					 this.src=res.data
					 console.log('二维码',res)
				 }
			},
			saveImg() {
			    // 下载图片
			    uni.downloadFile({
			        url: this.src,
			        success: function (res) {
			            if (res.statusCode === 200) {
			                // 下载成功，保存图片到相册
			                uni.saveImageToPhotosAlbum({
			                    filePath: res.tempFilePath,
			                    success: function () {
			                        uni.showToast({
			                            title: '图片保存成功',
			                            duration: 2000
			                        });
			                    },
			                    fail: function () {
			                        uni.showToast({
			                            title: '保存失败',
			                            duration: 2000
			                        });
			                    }
			                });
			            } else {
			                uni.showToast({
			                    title: '下载失败',
			                    duration: 2000
			                });
			            }
			        },
			        fail: function () {
			            uni.showToast({
			                title: '下载失败',
			                duration: 2000
			            });
			        }
			    });
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.all{
		background-color: #F2F2F2;
		min-height: 100vh;
		
	}
	.img{
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 80rpx;
	}
	.btn{
		width: 750rpx;
		margin-top: 80rpx;
		display: flex;
		justify-content: center;
		.flex{
			width: 474rpx;
			height: 78rpx;
			background: #F0250E;
			border-radius: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.ml7{
				margin-left: 7rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}

</style>
